<template>
  <div class="x-unit" @click.self="closeMask" :style="{ height: `${deviceH}px` }">
    <div class="unit-ctx" v-show="!isShow" :style="{ 'background-image': `url(${modelBg})` }">
      <div class="ctx-title">{{title}}</div>
      <div id="main" style="width: 1100px;height: 400px;"></div>
      </div>
      <div class="unit-ctx1" v-show="isShow" :style="{ 'background-image': `url(${modelbigBg})` }">
      <div class="ctx-title">{{title}}</div>
      <div id="main1" style="width: 1100px;height: 220px;"></div>
      <div id="main2" style="width: 1100px;height: 220px;"></div>
      <div id="main3" style="width: 1100px;height: 220px;"></div>
      </div>
  </div>
</template>
<script>
import { DevicesTypes } from "@/api/device";
export default {
  props:{
    linedata:{
      type: Object,
      default: {}
    }
  },
  data(){
    return{
      modelBg: require("@/assets/images/modelsmallBg.png"),
      modelbigBg: require("@/assets/images/modelBg.png"),
      deviceH:"",
      unitTypeList: [],
      alarmcodeJson: DevicesTypes(),
      title:'',
      chartdata:{},
      isShow:this.linedata.deviceType[5]=='10'?true:false
    }
  },
   beforeMount() {
    let h = document.documentElement.clientHeight || document.body.clientHeight;
    this.deviceH = h;
    this.GetDictDataEnumList()
  },
  mounted() {
    this.getchart()
    console.log('------')
    console.log(this.linedata)
    this.title=this.linedata.deviceType[1]

  },
  methods: {
    closeMask() {
      console.log(this.unitTypeList)
      this.$emit("closeMask");
    },
    switchchart(type){
      var xarr=[]
      var yarr=[]
      var title=""
      var valuename=""
      var danwei=""
      if(type=='1'){ //智能井盖
      title="井盖倾角曲线图"
      valuename="倾斜角度"
      danwei="度"
         this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.angle)
              }catch(error){
                yarr.push(0)
              }
            }
          })

      }
      if(type=='14'){ //智能井盖
      title="污水井液位监测曲线图"
      valuename="液位"
      danwei="mm"
         this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.distance)
              }catch(error){
                yarr.push(0)
              }
            }
          })

      }
      if(type=='11'){ //水表
        title="水表曲线图"
        valuename="累计量"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.accum)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
      if(type=='2'){ //可燃气体报警器
        title="可燃气体报警器曲线图"
        valuename="检测值"
        danwei="%LEL"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.gasvalue)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
      if(type=='3'){ //无线烟感
        title="无线烟感曲线图"
        valuename="烟浓度值"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.sm)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
      if(type=='5'){
        title="消防栓水压监测曲线图"
        valuename="水压"
        danwei="Kpa"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(Math.random()*0.1+0.3)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)

                yarr.push(obj.pressure)
              }catch(error){

                yarr.push(0)
              }
            }
          })
      }
      if(type=='7'){
        title="消防水箱液位监测曲线图"
        valuename="液位压力"
        danwei="mm"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(Math.random()*0.1+0.3)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.hydraulic)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
       if(type=='8'){
        title="水泵房漏水监测曲线图"
        valuename="液位"
        danwei="mm"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.distance)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
      if(type=='9'){
        title="水浸传感器曲线图"
        valuename="水浸状态"
        this.linedata.list.map(item=>{
            xarr.push(item.resultname)
            if(item.itmes==null){
              yarr.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr.push(obj.status)
              }catch(error){
                yarr.push(0)
              }
            }
          })
      }
      if(type=='10'){
        //气象站
        this.getthreecharts()
      }


      this.chartdata={
        title:title,
        xdata:xarr,
        ydata:yarr,
        valuename:valuename,
        danwei:danwei
      }
    },

    //获取类型
    GetDictDataEnumList() {
      var data = {};
      var arr = [];
      this.alarmcodeJson.map(item => {
        let name = item.devname;
        data[name] = item.devtype;
        // Object.assign(data, { name: item.devtype });
      });
      for (var i in data) {
        arr.push({
          enumName: i,
          id: data[i]
        });
      }
      this.unitTypeList = arr;

    },
    getchart(){
      this.switchchart(this.linedata.deviceType[5])
      var _this = this;
      let data = this.chartdata.xdata.map(item=>{
        return item.slice(5,item.length)+"点"
      });
      console.log(data)
      var ydata=this.chartdata.ydata;
      console.log(ydata)
      // console.log("--" + this.PeopleEchartsData[8].itmes[0].itmes[0].value);
      // for (let i in this.PeopleEchartsData[8].itmes) {
      //   data.push(this.PeopleEchartsData[8].itmes[i].resultname);
      //   lrData.push(this.PeopleEchartsData[8].itmes[i].itmes[0].value);
      //   lcData.push(this.PeopleEchartsData[8].itmes[i].itmes[1].value);
      // }
      let echarts = document.getElementById("main");
      let myChart = this.$echarts.init(echarts);
      //myChart.getZr().on('click', param => {
      //  console.log(param)
      //})
      myChart.setOption({
        title: {
          text: this.chartdata.title,
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "10%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#47e3ff", "#f7b500"],
        // legend: {
        //   data: ["流入人口"],
        //   textStyle: {
        //     color: "#fff"
        //   },
        //   icon:"rect",
        //   top: "18%",
        //   right: "10%"

        // },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: data,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisLabel:{
            formatter:`{value}`+this.chartdata.danwei
          },
          splitLine: {
            lineStyle: {
              color: ["grey"],
              width: 1,
              type: "solid"
            }
          }
        },
        grid: {
          top: "30%"
        },
        series: [
          {
            name: this.chartdata.valuename,
            type: "line",
            data: ydata,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          }
        ]
      });

      console.log("==finish");
    },
    getthreecharts(){
      var xarr=[]
      var yarr1=[]
      var yarr2=[]
      var yarr3=[]
      var yarr4=[]
      var yarr5=[]
      var yarr6=[]
      this.linedata.list.map(item=>{
            xarr.push(item.resultname.slice(5,item.length)+"点")
            if(item.itmes==null){
              yarr1.push(0)
              // yarr1.push(0)
              yarr2.push(0)
              yarr3.push(0)
              yarr4.push(0)
              yarr5.push(0)
              yarr6.push(0)
            }else{
              try{
                let obj=JSON.parse(item.itmes.data)
                yarr1.push(obj.temp/10)
                yarr2.push(obj.hum/10)
                yarr3.push(obj.avgspeed/10)
                yarr4.push(obj.rain/10)
                yarr5.push(obj.radiation/10)
                yarr6.push(obj["PM2.5"]/10)
              }catch(error){
                yarr1.push(0)
                yarr2.push(0)
                yarr3.push(0)
                yarr4.push(0)
                yarr5.push(0)
                yarr6.push(0)
              }
            }
          })


      let echarts1 = document.getElementById("main1");
      let myChart1 = this.$echarts.init(echarts1);
      myChart1.setOption({
        title: {
          text: "温湿度曲线图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#47e3ff", "#f7b500"],
        legend: {
          data: ["温度", "湿度"],
          textStyle: {
            color: "#fff"
          },
          top: "18%",
          right: "10%",
          icon: "rect",
          //selectedMode:false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xarr,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: [{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisLabel:{
            formatter:`{value}`+"℃"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
           axisLabel:{
            formatter:`{value}`+"%RH"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        }],
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "温度",
            yAxisIndex : '0',//使用第一个y轴
            type: "line",
            data: yarr1,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "湿度",
            yAxisIndex : '1',
            type: "line",
            data: yarr2,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#526442"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });


      let echarts2 = document.getElementById("main2");
      let myChart2 = this.$echarts.init(echarts2);
      myChart2.setOption({
        title: {
          text: "风速/雨量曲线图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#47e3ff", "#f7b500"],
        legend: {
          data: ["风速", "雨量"],
          textStyle: {
            color: "#fff"
          },
          top: "18%",
          right: "10%",
          icon: "rect",
          //selectedMode:false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xarr,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: [{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
           axisLabel:{
            formatter:`{value}`+"m/s"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
           axisLabel:{
            formatter:`{value}`+"mm"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        }],
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "风速",
             yAxisIndex : '0',//使用第一个y轴
            type: "line",
            data: yarr3,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "雨量",
             yAxisIndex : '1',//使用第一个y轴
            type: "line",
            data: yarr4,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#526442"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });
      let echarts3 = document.getElementById("main3");
      let myChart3 = this.$echarts.init(echarts3);
      myChart3.setOption({
        title: {
          text: "辐射/PM2.5曲线图",
          textStyle: {
            color: "#56FFFA"
          },
          top: "15%",
          left: "5%"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#47e3ff", "#f7b500"],
        legend: {
          data: ["辐射", "PM2.5"],
          textStyle: {
            color: "#fff"
          },
          top: "18%",
          right: "10%",
          icon: "rect",
          //selectedMode:false,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xarr,
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          }
        },
        yAxis: [{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisLabel:{
            formatter:`{value}`+"w/m2"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        },{
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#e5e5e5"
            }
          },
          axisLabel:{
            formatter:`{value}`+"ug/m3"
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: ["#6c6c6c"],
              width: 1,
              type: "solid"
            }
          }
        }],
        grid: {
          top: "30%"
        },
        series: [
          {
            name: "辐射",
            type: "line",
            data: yarr5,
            symbol: "none", //隐藏点
            smooth: true,
            yAxisIndex : '0',//使用第一个y轴
            areaStyle: {
              color: "#17495d"
            },
            lineStyle: {
              color: "#47e3ff"
            }
          },
          {
            name: "PM2.5",
            type: "line",
            yAxisIndex : '1',//使用第一个y轴
            data: yarr6,
            symbol: "none", //隐藏点
            smooth: true,
            areaStyle: {
              color: "#526442"
            },
            lineStyle: {
              color: "#f7b500"
            }
          }
        ]
      });
    }
  },
}
</script>
<style lang="less" scoped>
.x-unit {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 999;
     .ctx-title {
      width: 100%;
      padding-top: 30px;
      box-sizing: border-box;
      font-family: PingFangSC-Medium;
      font-size: 24px;
      color: #e9e9e9;
      // letter-spacing: 4.8px;
      text-align: center;
      box-sizing: border-box;
    }
    .unit-ctx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    // height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;
    }
     .unit-ctx1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 1177px;
    height: 800px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    padding: 10px 30px;
    box-sizing: border-box;
    }

  .item-pie {
    width: 100%;
    height: 400px;
    margin-top: 10px;
    padding: 5px 0px;
    box-sizing: border-box;
    .pie-canvas {
      width: 100%;
      height: 100%;
    }
  }

}
</style>
